<template>
<div>
  <router-link tag="div" to="/" class="header-abs" v-show="showAbs">
      <div class="iconfont header-abs-back">&#xe624;</div>
  </router-link>
  <div class="header-fixed"  v-show="!showAbs" :style="opacityStyle">
      景点详情
        <router-link to='/'><div class="iconfont headerr-fixed-back">&#xe624;</div></router-link>
  </div>
  
</div>
</template>
<script>

export default {
    name:'DetailHeader',
    data() {
        return {
            showAbs:true,
            opacityStyle:{
                opacity:0
            }
        }
    },
    methods: {
        handleScroll(){
            // 求得滚动条滚动的值
           let top=document.documentElement.scrollTop
           if(top>60){
            //    判断当top值大于60px。就定义opacity=滚动的值/140px（最多等于1）
               let opacity=top/140
            //    三元判断：如果opacity大于1，那么就显示opacity：1 否则就等于opacity
               opacity=opacity>1?1:opacity
               this.opacityStyle={opacity}
               this.showAbs=false
           } else{
               this.showAbs=true
           }
        }
    },
    activated() {
        window.addEventListener('scroll',this.handleScroll)
    },
    deactivated() {
        // 全局解绑  因为addEventListener 绑定在了window全局上，不仅对当前组件有效，对其他组件也有效，
        // 所以需要解绑
        window.removeEventListener('scroll',this.handleScroll)
    },
   
}
</script>
<style lang="stylus" scoped>
@import '~styles/varibles.styl';
.header-abs
    position :absolute
    left :.2rem
    top:.2rem
    width :.8rem
    height :.8rem
    line-height :.8rem
    border-radius :.4rem
    background :rgba(0,0,0,.6)
    text-align :center
    .header-abs-back
        color :#fff
        font-size :.4rem
 .header-fixed
        z-index :2
        position :fixed
        top:0
        left :0
        right :0
        line-height :$headerHeight
        height :$headerHeight
        color :#fff
        background-color :$bgColor
        text-align :center
        font-size :.32rem
        .headerr-fixed-back
            position :absolute
            left :0
            top:0
            width :.64rem
            font-size: .4rem
            text-align :center
            color :#fff    
</style>
